<div class="box ui-widget-content pca" id="draggable" >
  <div id="close" onclick="closeBox()">close</div>
  <script type="text/javascript">$("#draggable").draggable();$("#draggable").resizable({minWidth:700, maxWidth:700, maxHeight:${(PCAValues.size()*360)+40}, alsoResize: ".box .projects" });</script>
  <div class="headline" id="boxhead">
    <div class="info"><div class="bold">Principal Component Analysis</div> for searched Proteins</div>
    <div class="info"></div>
  </div>
  <div class="projects">
    <g:each in="${PCAValues.keySet()}" var="proj">
      <div class="proj">
        <div class="name">${Projects[proj]}</div>
        <div class="plot">
          <g:set var="ScaleX" value="${(180/MaxPCAValues[proj].maxX)}" />
          <g:set var="ScaleY" value="${(135/MaxPCAValues[proj].maxY)}" />
          <g:each in="${PCAValues[proj].keySet()}" var="cls">
            <g:each in="${PCAValues[proj][cls].keySet()}" var="cel">
              <g:set var="xyValues" value="${PCAValues[proj][cls][cel]}" />
              <g:set var="XPos" value="${(xyValues.xVal * ScaleX)+200-1}" />
              <g:set var="YPos" value="${(xyValues.yVal * ScaleY)+145-1}" />
              <div class="point" style="background: ${Colors[cls]}; left:${XPos}px; bottom:${YPos}px;">
                <div class="info">${Celllines[proj][cls][cel]}</div>
              </div>
            </g:each>
          </g:each>
        </div>
        <div class="description list">
          <div class="data">
            <div class="line headline">
              <div class="element cellline">Tissue of Origin</div>
            </div>
            <g:each in="${Celllines[proj].keySet()}" var="cell">
              <div class="line">
                <div class="element colorbox" style="background-color: ${Colors[cell]};"></div>
                <div class="element cellline">${cell}</div>
              </div>
            </g:each>
          </div>
        </div>
      </div>
    </g:each>
  </div>
</div>
